<template>
  <div
    class="w-full sm:w-[500px] h-[300px] sm:h-[400px] rounded-sm shadow-lg relative p-5"
  >
    <!-- 城市和温度 -->
    <div class="flex justify-between items-start">
      <!-- 城市信息 -->
      <div class="font-bold flex flex-col text-gray-700 dark:text-gray-200">
        <span class="text-xl">{{ '眉山市' }}</span>
        <span class="text-xl leading-snug text-gray-500 dark:text-gray-200">
          {{ '彭山区' }}
        </span>
        <span class="text-md leading-snug text-gray-500 dark:text-gray-200">
          {{ '学院南路' }}
        </span>
      </div>

      <!-- 天气信息 -->
      <div
        class="relative z-10 flex flex-col items-end text-gray-700 dark:text-gray-200 mt-[-10px]"
      >
        <span
          class="text-4xl font-semibold leading-none relative after:content-['°'] after:absolute after:top-[-10px] after:right-[-15px] after:text-3xl after:font-semibold after:leading-none"
        >
          {{ cityWeaherMessage.temperature || '8' }}
        </span>
        <span
          class="text-xs mt-2 py-1 px-2 bg-gray-100 dark:bg-gray-800 rounded-full text-gray-600 dark:text-gray-400 tracking-wide"
        >
          {{ cityWeaherMessage.weather || '阴' }}
        </span>
      </div>
    </div>

    <!-- 附加信息：湿度、风速、气压 -->
    <div class="mt-6 text-sm text-gray-600 dark:text-gray-200 space-y-3">
      <div class="flex justify-between">
        <span class="font-medium">湿度:</span>
        <span class="tracking-wide">60%</span>
      </div>
      <div class="flex justify-between">
        <span class="font-medium">风速:</span>
        <span class="tracking-wide">5 m/s</span>
      </div>
      <div class="flex justify-between">
        <span class="font-medium">风向:</span>
        <span class="tracking-wide">
          {{ cityWeaherMessage.winddirection || '未知' }}
        </span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import {
  GetPositionAdcode,
  GetPositionWeather
} from '@/api/Desktop/website/index.js'

const cityWeaherMessage = ref({})

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(
    (position) => {
      const latitude = position.coords.latitude // 纬度
      const longitude = position.coords.longitude // 经度
      GetPositionAdcode(latitude, longitude)
        .then((res) => {
          // 使用map将res.data中的key值作为新对象的属性，value值作为新对象的属性值
          cityWeaherMessage.value = Object.assign(
            {},
            ...Object.entries(res.data).map(([key, value]) => ({
              [key]: value
            }))
          )
          GetPositionWeather(res.data.adcode).then((res) => {
            // 将天气信息映射到cityWeaherMessage.value中同时不要覆盖掉之前映射到属性
            cityWeaherMessage.value = Object.assign(
              cityWeaherMessage.value,
              ...Object.entries(res.data).map(([key, value]) => {
                return {
                  [key]: value
                }
              })
            )
          })
        })
        .catch((error) => {
          console.log(error, '获取天气失败')
        })
    },
    (error) => {
      switch (error.code) {
        case error.PERMISSION_DENIED:
          console.error('用户拒绝了位置权限请求。')
          break
        case error.POSITION_UNAVAILABLE:
          console.error('位置信息不可用。')
          break
        case error.TIMEOUT:
          console.error('请求获取位置信息超时。')
          break
        default:
          console.error('获取位置信息时发生未知错误。')
      }
    },
    {
      enableHighAccuracy: true, // 提高精确度
      timeout: 5000, // 请求超时时间
      maximumAge: 5000 * 10 // 缓存时间
    }
  )
} else {
  console.error('当前浏览器不支持 Geolocation API。')
}
</script>

<style scoped>
/* 可根据需要调整样式 */
</style>
